import React from 'react';
import { TMap } from '@map-component/react-tmap';

const About = () => {
    const [list, SetList] = React.useState<any>([]);
    const [hotelinfo, SetHotelInfo] = React.useState<any>({});

    React.useEffect(()=>{
        GetAboutData();
    }, [])

    const GetAboutData = async() =>
    {
        let result = await  React.HTTP.post('/business/about');
        if(result.code == 1)
        {
            SetList(result.data.list);
            SetHotelInfo(result.data.hotelinfo)
        }
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/hotel-info.css"></link>

             <React.UI.Swiper autoplay loop={true}>
                {
                    list.map((item:any) =>{
                        return(
                            <React.UI.Swiper.Item key={item.id}>
                                <React.Router.NavLink to={`/coupon/info?cid=${item.id}`} style={{width: '100%'}}>
                                    <React.UI.Image src={item.thumb_text} height={213} fit='cover' />
                                </React.Router.NavLink>
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="hotelinfo">
                <div className="hotelinfo_title">
                   {hotelinfo.hotel_name}
                </div>
                <div className="hotelinfo_address">
                    {hotelinfo.hotel_store}
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">简介</div>
                    <div>{hotelinfo.hotel_desc}</div>
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">详情</div>
                    <div>{hotelinfo.hotel_details}</div>
                </div>
                <div className="map" id="map">
                    <TMap
                        mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                        center={{ lat: 39.984104, lng: 116.307503 }}
                        version='1.exp'
                    />
                </div>
            </div>
        </>
    )
}

export default About;